<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--
        ajax
        页面无刷新
        -->
        <script>
            //定义清除的代码
            var clearselect = function (sel) {
                for (var i = sel.options.length - 1; i > 0; i--) {
                    sel.removeChild(sel.options[i]);
                }
            };
            //声明一个data对像
            var data = {
                "HN": {
                    name: "湖南省",
                    child: {
                        "GZ": {
                            name: "长沙市",
                            child: {
                                "YL": {name: "岳麓区"},
                                "YH": {name: "雨花区"},
                                "TX": {name: "天心区"},
                                "KY": {name: "开元区"}

                            }
                        },
                        "ZZ": {
                            name: "株洲市",
                            child: {
                                "LS": {name: "芦淞区"},
                                "SF": {name: "石峰区"},
                                "TY": {name: "天元区"}
                            }
                        }
                    }
                },
                "GD": {
                    name: "广东省",
                    child: {
                        "GZ": {
                            name: "广州市",
                            child: {
                                "YX": {name: "越秀区"},
                                "BY": {name: "白云区"},
                                "HD": {name: "花都区"},
                                "TH": {name: "天河区"}

                            }
                        },
                        "SZ": {
                            name: "深圳",
                            child: {
                                "FT": {name: "福田区"},
                                "LH": {name: "罗湖区"},
                                "NS": {name: "南山区"},
                                "LG": {name: "龙岗区"}
                            }
                        }
                    }
                }
            };
            //页面加载完成
            window.onload = function () {
                //先初始化省份的数据
                //循环遍历json数据 for in
                for(var i in data ){
                 //先创建option
                    var opt = document.createElement("option");
                    //在opt中填充数据
                    opt.textContent = data[i]["name"];
                    opt.value = i;
                    document.getElementById("sel1").appendChild(opt);
                }

                //sel1的点击事件
                document.getElementById('sel1').onchange = function () {
                    //清除老的数据
                    clearselect(document.getElementById('sel2'));
                    clearselect(document.getElementById('sel3'));

                    //添加新的数据
                    if (this.value != ""){
                     var sx_data = data[this.value]['child'];
                        for(var i in sx_data ){
                            //先创建option
                            var opt = document.createElement("option");
                            //在opt中填充数据
                            opt.textContent = sx_data[i]["name"];
                            opt.value = i;
                            document.getElementById("sel2").appendChild(opt);
                        }
                    }


                };
                //sel2的点击事件
                document.getElementById('sel2').onchange = function () {
                    //清除老的数据
                    clearselect(document.getElementById('sel3'));
                    //添加新的数据

                    if (this.value != ""){
                      var  qy_data = data[document.getElementById("sel1").value]['child'][this.value]['child'];
                        for(var i in qy_data ){
                            //先创建option
                            var opt = document.createElement("option");
                            //在opt中填充数据
                            opt.textContent = qy_data[i]["name"];
                            opt.value = i;
                            document.getElementById("sel3").appendChild(opt);
                        }
                    }



                };

            };
        </script>
    </head>
    <body>
    省份：<select id="sel1">
        <option value="">请选择</option>
    </select>
    市县：<select id="sel2">
        <option value="">请选择</option>
    </select>
    区域：<select id="sel3">
        <option value="">请选择</option>
    </select>
    </body>
</html>